import React from 'react';
import styles from './index.module.less';
import { Button, Card, Form, Input, message } from 'antd';
import { useNavigate } from 'umi';
import { loginAPI } from '@/api/login';
import { setToken } from '@/utils/tools';

//登录页
const Login: React.FC = () => {
  const navigate = useNavigate();
  return (
    <div className={styles.wrap}>
      <div className={styles.main}>
        <Card
          title='康康学习umi架构中后台'
          style={{
            width: '600px',
            height: '400px',
            borderRadius: '50px',
          }}
        >
          <Form
            style={{ padding: '50px' }}
            labelCol={{ span: 3 }}
            onFinish={async (v) => {
              console.log(v);
              const res: any = await loginAPI(v);
              console.log(res);
              if (res?.success) {
                //存token
                setToken(res.data);
                navigate('/dashboard');
                message.success(res?.errorMessage);
              } else {
                message.error(res?.errorMessage);
              }
            }}
          >
            <Form.Item
              label='用户名'
              name='userName'
              rules={[{ required: true, message: '用户名不能为空' }]}
            >
              <Input placeholder='请输入用户名' />
            </Form.Item>
            <Form.Item
              label='密码'
              name='password'
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input placeholder='请输入密码' />
            </Form.Item>
            <Form.Item>
              <Button
                type='primary'
                htmlType='submit'
                style={{ width: '100%' }}
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  );
};

export default Login;
